<template>

  <div class="lbt" ref="carouselContainer" @wheel="handleMouseWheel">
    <el-carousel height="100vh" direction="vertical" @change="handleCarouselChange" ref="carousel">
      <el-carousel-item v-for="(item, index) in AdvertList" :key="index">
        <img style="height: 100vh; width: 100%" referrerpolicy="no-referrer" :src="item.thumb" />
      </el-carousel-item>
    </el-carousel>


    <div class="row nav">
      <div class="home cursor">首页</div>
      <div class="gl cursor">功能</div>
      <div class="gl cursor">真知故事</div>
    </div>

    <div class="row itemc" v-if="itemShow==0">

      <div class="row_a_c center pg cursor">
        <img style="height: 48px;width: 48px;" src="../assets/images/pg.png" />
        <div>
          <div class="ywzx">Download on the</div>
          <div class="ywzxx">App Store</div>
        </div>
      </div>

      <div class="row_a_c center pg cursor">
        <img style="height: 48px;width: 48px;" src="../assets/images/az.png" />
        <div>
          <div class="ywzx">Download on the</div>
          <div class="ywzxx">Android</div>
        </div>
      </div>

    </div>

    <div class="cursor" style="position: fixed;bottom: 50px;left: 50%;: auto;z-index: 1000;font-size: 20px;font-weight: 100;color: aliceblue;" onclick="window.location.href = 'https://beian.miit.gov.cn';">
      蜀ICP备18001996号-9
    </div>


  </div>

</template>

<script>
  export default {
    name: "Index",
    data() {
      return {
        itemShow: 0,
        AdvertList: [{
            thumb: require('@/assets/images/a.png')
          },
          {
            thumb: require('@/assets/images/b.png')
          },
          {
            thumb: require('@/assets/images/c.png')
          },
          {
            thumb: require('@/assets/images/d.png')
          },
          {
            thumb: require('@/assets/images/e.png')
          },
          {
            thumb: require('@/assets/images/f.png')
          },
        ],
      };
    },
    watch: {},
    created() {},

    mounted() {
      this.$refs.carousel.$el.addEventListener("wheel", (event) => {
        event.preventDefault();
      });

      this.$refs.carouselContainer.addEventListener("wheel", this.handleMouseWheel);
    },
    beforeDestroy() {
      this.$refs.carouselContainer.removeEventListener("wheel", this.handleMouseWheel);
    },
    watch: {

    },

    methods: {

      handleMouseWheel(event) {
        const delta = Math.sign(event.deltaY);
        if (delta > 0) {
          this.$refs.carousel.next();
        } else if (delta < 0) {
          this.$refs.carousel.prev();
        }
      },

      handleCarouselChange(index) {
        console.log('index', index)
        this.itemShow = index
        // 在这里执行您想要执行的逻辑
      },








    },
  };
</script>


<style scoped lang="scss">
  .lbt {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .home {
    margin-right: 30px;
    font-size: 28px;
    font-family: Source Han Serif CN-Heavy, Source Han Serif CN;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 40px;



  }

  .gl {
    margin-right: 30px;
    font-size: 28px;
    font-family: Source Han Serif CN-Regular, Source Han Serif CN;
    font-weight: 400;
    color: #FFFFFF;


  }

  .nav {
    position: absolute;
    top: 92px;
    right: 112px;
    z-index: 1000;
  }

  .pg {
    width: 250px;
    height: 82px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px 20px 20px 20px;
    opacity: 1;
    margin-right: 50px;
  }

  .ywzx {
    font-size: 18px;
    font-family: Arial-Regular, Arial;
    font-weight: 400;
    color: #FFFFFF
  }

  .ywzxx {
    width: 96px;
    height: 23px;
    font-size: 20px;
    font-family: Arial-Bold, Arial;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 23px;

  }

  // .itemc{
  //  position: absolute;
  //  top: 60%;
  //  right: 50%;
  //  z-index: 1000;
  // }


  .itemc {
    position: absolute;
    left: 52%;
    top: 60%;
    transform: translateX(-50%);
    z-index: 1000;
  }

  ::v-deep .el-carousel__button {
    // 指示器按钮
    width: 8px;
    height: 30px;
    // border: none;
    // border-radius: 50%;
    // background-color: rgba(0, 0, 0, 0.8);
  }
</style>